<template>
	<view>
		<navigationbar :title="from_info.nickname"></navigationbar>
		<view class="container">
			<view class="topTitle">
				<view class="content">
					<view class="left" @click="leftClick">
						<text class="iconfont icon-weixin"></text>
						<view>
							<text>换微信</text>
						</view>
					</view>
					<view class="right" @click="rightClick">
						<text class="iconfont icon-wodejianli"></text>
						<view>
							<text>打招呼</text>
						</view>
					</view>
				</view>
			</view>
			<view class="msgContainer">
				<view class="content" v-for="(item,index) in body" :key="index">
					<view class="leftMsg" v-if="item.role === 1">
						<image :src="from_info.avatar"></image>
						<view class="msgText">
							<text>{{item.content}}</text>
						</view>
					</view>
					<view class="rightMsg" v-else>
						<view class="msgText" v-if="item.type === 'text'">
							<text>{{item.content}}</text>
						</view>
						<view class="msgFile" v-else @click="downloadFile">
							<text>{{item.content.fileName}}</text>
						</view>
						<image :src="to_info.recruitment.icon"></image>
					</view>
				</view>
				<view class="clearfix">
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="content">
				<view class="ipt"><u--input placeholder="请输入内容" border="surround" v-model="iptMsg" shape="circle"></u--input></view>
				<view class="btn"><u-button type="primary" text="发送" @click="send"></u-button></view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import navigationbar from '../../navigationBar.vue'
	export default {
		components:{
			navigationbar
		},
		created() {
			let data = this.$store.state.currentMsg
			console.log(data)
			this.to_info = data.to_info
			this.from_info = data.from_info
			this.body = data.body
		},
		data() {
			return {
				to_info: {},
				from_info: {},
				iptMsg: '',
				body: []
			}
		},
		methods: {
			leftClick() {
				let time = new Date().getTime()
				let obj = {
					type: 'text',
					content: this.$store.state.userInfo.wx_number,
					data: time,
					role: 0
				}
				this.body.push(obj)
				uniCloud.callFunction({
					name: 'setMsgData',
					data: {
						id: this.$store.state.currentMsg._id,
						arr: this.body
					},
					success(res) {
						console.log(res)
					}
				})
			},
			rightClick() {
				let time = new Date().getTime()
				let obj = {
					type: 'text',
					content: '你好，请问你对我们公司有兴趣吗？',
					data: time,
					role: 0
				}
				this.body.push(obj)
				uniCloud.callFunction({
					name: 'setMsgData',
					data: {
						id: this.$store.state.currentMsg._id,
						arr: this.body
					},
					success(res) {
						console.log(res)
					}
				})
			},
			downloadFile(){
				uni.downloadFile({
					url: this.$store.state.userInfo.resume_list[0].fileID,
					success:(res) => {
						if (res.statusCode === 200) {
							uni.saveFile({
								tempFilePath: res.tempFilePath, //临时路径
								success:(res) => {
									this.$refs.uToast.show({
										message: '文件下载成功',
										icon: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
										type: 'success'
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												console.log('打开文档成功');
											}
										});
									}, 3000);
								}
							});
						}
					}
				});
			},
			send() {
				let time = new Date().getTime()
				let obj = {
					type: 'text',
					content: this.iptMsg,
					data: time,
					role: 0
				}
				this.iptMsg = ''
				this.body.push(obj)
				uniCloud.callFunction({
					name: 'setMsgData',
					data: {
						id: this.$store.state.currentMsg._id,
						arr: this.body
					},
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.container {
	width: 100vm;
	height: 100vh;
	background-color: #f3f3f3;
	overflow: auto;
	position: relative;
	.topTitle{
		position: sticky;
		top: 0;
		width: 100%;
		height: 140rpx;
		background-color: white;
		.content{
			height: 100%;
			display: flex;
			flex-flow: row;
			justify-content: space-around;
			align-items: center;
			.right,.left{
				display: flex;
				flex-flow: column;
				align-items: center;
				&>text {
					font-size: 40rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
	.topCard {
		width: 90%;
		// height: 300rpx;
		margin: auto;
		margin-top: 60rpx;
		background-color: white;
		overflow: hidden;
		.content {
			width: 90%;
			margin: auto;
			.name {
				margin-top: 20rpx;
				display: flex;
				flex-flow: row;
				justify-content: space-between;
				& text:nth-of-type(2) {
					color: #7aaffe;
				}
			}
			.company {
				margin-top: 10rpx;
			}
			.postinfo {
				margin-top: 20rpx;
				text {
					font-size: 28rpx;
					display: inline-block;
					margin-right: 20rpx;
					padding: 10rpx;
					background-color: #e8e8e8;
					border-radius: 10rpx;
				}
			}
			.image {
				margin: 15rpx 0;
				display: flex;
				flex-flow: row;
				align-items: center;
				font-size: 30rpx;
				image {
					width: 70rpx;
					height: 70rpx;
					margin-right: 20rpx;
					border-radius: 35rpx;
				}
			}
		}
	}
	.msgContainer {
		width: 90%;
		margin: 0 auto;
		margin-top: 50rpx;
		.content {
			margin: 30rpx 0;
			image{
				width: 90rpx;
				height: 90rpx;
				border-radius: 45rpx;
			}
			.msgText{
				max-width: 65%;
				margin: 0 20rpx;
				padding: 20rpx 15rpx;
				background-color: white;
				border-radius: 20rpx;
			}
			.msgFile{
				width: 65%;
				height: 120rpx;
				padding: 20rpx 20rpx;
				border-radius: 12rpx;
				background-color: white;
				margin-right: 20rpx;
				display: flex;
				flex-flow: row;
				align-items: center;
			}
			.rightMsg {
				margin-bottom: 30rpx;
				display: flex;
				flex-flow: row;
				justify-content: flex-end;
				align-items: center;
			}
			.leftMsg {
				margin-bottom: 30rpx;
				display: flex;
				flex-flow: row;
				justify-content: flex-start;
				align-items: center;
			}
		}
		.clearfix{
			height: 120rpx;
		}
	}
}
.bottom {
	width: 100%;
	position: fixed;
	bottom: 0;
	height: 140rpx;
	background-color: white;
	.content {
		width: 95%;
		height: 100%;
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		margin: auto;
		.ipt {
			width: 75%;
			margin: auto;
		}
		.btn {
			width: 20%;
			margin: auto;
		}
	}
}
.u-input {
	height: 60rpx;
}
.u-button {
	width: 120rpx;
	height: 70rpx;
}
</style>
